CSS_18_반응형 웹 기술

18_반응형 웹 기술 3가지

반응형 웹(response web)이란 하나의 html문서를 제작하여 pc, tablet, moblie 화면에서 최적화된 콘텐츠를 보여주기 위한 기술

반응형 웹에서는 1. 가변 크기 단위 2. 뷰포트 속성 3. 가로 해상도별 서식 적용을 위한 '미디어쿼리'속성이 사용됨

1. 가변단위

em: 부모 요소의 font-size를 상속받아 크기가 결정되는 단위
rem: root의 약자로 부모의 폰트크기를 상속받지 않고 최상위(html)요소에서 결정된 폰트크기를 기준으로 크기가 결정되는 단위 (16px = 1rem)
vh: view height의 약자로 웹브라우저의 높이를 100으로 기준하여 높이 크기가 결정됨
vw: view width의 약자로 웹브라우저의 가로를 100으로 기준하여 너비 크기가 결정됨
vmin: 높이와 너비 중 짧은 쪽으로 100 기준하여 크기가 결정됨
vmax: 높이와 너비 중 긴쪽으로 100 기준하여 크기가 결정됨
%: 부모 요소를 기준으로 비율을 표현하는 단위(반응형에서 주로 많이 사용됨)

2. 뷰포트 속성

meta name="viewport" content="width=divice-width, initial-scale=1.0"

사용자의 디바이스 화면 크기에 맞추어 웹문서를 100%로 보여 줄 수 있는 속성으로 PC보다 태블릿 모바일 사용자를 위해 필요함

웹문서의 상단 head에 작성(charset 밑에 작성)

name="viewport" : pc/tablet/mobile 디바이스 화면에 맞게 설정함
width=device-width : 콘텐츠 내용을 pc/tablet/moblie 화면 너비와 일치시킴
initial-scale=1 : 디바이스 화면에 1:1 비율로 보이게 함 (숫자 2 입력시 화면이 2배로 커짐, 1=100% 2=200%)

3. 미디어쿼리(mediaquery) 속성

브라우저의 가로 너비(해상도)에 따라 또는 사용자의 디스플레이 가로 해상도에 따라 CSS를 적용하기위한 기술로서 반응형 웹페이지 제작시 필수 속성임

미디어쿼리 작성 시 각각의 디바이스별 해상도에 대해 이해 할 필요가 있는데,
모바일 : 0~767 / 태블릿: 768~1024 / PC : 1280~1920까지 해상도 영역을 설정하며, 이것을 break point(중단점)이라고 함

break point(중단점) : 0 ~ 320 ~ 480 ~ 768 ~ 960 ~ 1000 ~ 1200

미디어 쿼리 작성법(띄어쓰기 주의)
@media screen and (디바이스 가로해상도) {
조건에 맞는 해상도일때 작용 할 CSS 서식;
}

4. 미디어 쿼리 실습하기

        /* pc화면 서식 */
        @media screen and (min-width:1025px) {
          .Mbox{background: #C0D8C0;}
        }
        
        /* 2. tablet 화면 서식 */
        @media screen and (min-width:768px) and (max-width:1024px) {
          .Mbox{background: #F5EEDC;}
        }
    
        /* 3. mobile 화면 서식 */
        @media screen and (max-width:767px){
          .Mbox{background:#ccc}
        }